/* pages/me/me.wxss */
.container {
  padding-bottom: 20rpx;
  box-sizing: border-box;

  .personal-info {
    position: relative;

    .block {
      width: 100%;
      height: 20rpx;
      position: absolute;
      top: -20rpx;
      left: 0;
      border-radius: 18rpx 18rpx 0 0;
      background: #fff;
    }

    .user-info {
      width: 100%;
      padding: 0 30rpx 0 60rpx;
      box-sizing: border-box;
      position: absolute;
      top: -110rpx;
      left: 0;
      display: flex;
      justify-content: space-between;
      color: #fff;

      .info {
        display: flex;

        .avatar {
          width: 200rpx;
          height: 200rpx;
          position: relative;
          background-color: #f1f1f1;
          border-radius: 20rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 20rpx;
          }
          .btn{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
          }
        }

        .name {
          width: flex;
          padding: 31rpx 37rpx 42rpx;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 36rpx;

          .btn {
            background: transparent;
            color: #fff;
            border: 1px solid transparent;
            padding: 0;
            border-radius: 0;
          }

          .tip {
            color: #B3B3B3;
            font-size: 30rpx;
          }
        }
      }

      .follow {
        position: absolute;
        bottom: 0;
        right: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 36rpx;

        button {
          color: #fff;
          width: 166rpx;
          height: 57rpx;
          line-height: 57rpx;
          background: linear-gradient(89deg, #5ED1E1 0%, #BFC2FE 50%, #F49BD9 100%);
          border-radius: 12rpx;
          // border: 1px solid #5ED1E1;
          font-size: 30rpx;
        }
      }
    }

    .count {
      padding: 163rpx 30rpx 0 80rpx;
      display: flex;

      .count-item {
        margin-right: 70rpx;
        font-size: 30rpx;
        color: #8D8D8D;
        text-align: center;
        font-weight: bold;

        .number {
          font-size: 36rpx;
          color: #595959;
          margin-bottom: 6rpx;
        }
      }
    }

    .line {
      width: calc(100% - 60rpx);
      height: 1rpx;
      background: #EFEFEF;
      margin: 63rpx auto;
    }

    .tab-list{
      padding: 0 12rpx;
      box-sizing: border-box;
      display: flex;
      overflow: auto;
      width: 100%;
      .item{
        padding: 0 11px;
        &.active{
          color: #00B7C7;
        }
      }
    }

    .svc-content{
      padding: 9rpx;
      .create-btn{
        width: 230rpx;
        margin: auto;
        margin-top: 100rpx;
        button{
          background: #00B7C7;
          width: 100%;
          height: 80rpx;
          line-height: 80rpx;
          font-size: 35rpx;
          letter-spacing: 1rpx;
        }
        .text{
          color: #695c5c;
        }
      }
    }
    .resource {
      padding: 0 12rpx;
      box-sizing: border-box;
      overflow: auto;

      .weui-tabs {
        height: 100%;

        .weui-tabs-bar__content {
          height: 58rpx;

          .weui-tabs-bar__item {
            padding: 0 20rpx;

            .weui-tabs-bar__title {
              padding-bottom: 15rpx;
            }
          }
        }

        .weui-tabs-swiper {
          height: calc(100% - 58rpx);

          .tab-content {
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            .item {
              width: 50%;
              padding: 9rpx;
              background: #fafafa;
              box-sizing: border-box;

              .cover {
                width: 100%;
                height: 220rpx;
                position: relative;

                image {
                  width: 100%;
                  height: 100%;
                  border-radius: 15rpx 15rpx 0 0;
                }

                .mask-wait {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 0;
                  left: 0;
                  background: rgba(0, 0, 0, .4);
                  border-radius: 15rpx 15rpx 0 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  .wait-msg {
                    color: #EFEFEF;
                    font-size: 28rpx;

                    i {
                      font-size: 28rpx;
                    }
                  }
                }
              }
              .title-content{
                width: 100%;
                height: 100rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #ffffff;
              }
              .title {
                width: 100%;
                // height: 100rpx;
                display: -webkit-box;
                text-overflow: ellipsis;
                overflow: hidden;-webkit-line-clamp: 2; // 设置两行文字溢出
                -webkit-box-orient: vertical;
                font-size: 30rpx;
                color: #4F4F4F;
                padding: 0 15rpx;
                background: #ffffff;
                box-sizing: border-box;
                border-radius: 0 0 10rpx 10rpx;
              }
            }
          
          }
        }
      }
    }
  }
}
// .root-portal-box{
//   height: 1000;
// }
.weui-dialog{
  .weui-dialog__hd {
    padding: 0 !important;
  }
  .weui-dialog__bd{
    padding: 0 !important;
    margin-bottom: 0 !important;
    position: relative;
    image{
      position: absolute;
      width: 200rpx;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
    }
  }
}

.svg-mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgb(0 0 0 / 32%);
  display: flex;
  padding-top: 100px;
  overflow: hidden;
  z-index: 99;
  box-sizing: border-box;
  .svc-container{
    width: 100%;
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;
    // border-radius: 40rpx 40rpx 0 0;
    overflow: hidden;
    .svc-btn{
      width: 100%;
      position: sticky;
      padding: 40rpx 20rpx;
      box-sizing: border-box;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      z-index: 999;

      button {
        font-size: 30rpx;
        background: #158BA4;
        height: 70rpx;
        line-height: 70rpx;
        border-radius: 8rpx;
        width: 180rpx;
        margin: 0;

        &.back {
          background: transparent;
          color: #000000;
        }
      }
    }
    .resource-list{
      flex: 1;
      overflow: auto;
    }
  }
}

.resource-list{
  display: flex;
  flex-wrap: wrap;
  position: relative;
  .item {
    width: 50%;
    padding: 9rpx;
    background: #fafafa;
    box-sizing: border-box;
    position: relative;
    .cover {
      width: 100%;
      height: 220rpx;
      position: relative;

      image {
        width: 100%;
        height: 100%;
        border-radius: 15rpx 15rpx 0 0;
      }

      .mask-wait {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .4);
        border-radius: 15rpx 15rpx 0 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .wait-msg {
          color: #EFEFEF;
          font-size: 28rpx;

          i {
            font-size: 28rpx;
          }
        }
      }
    }
    .title-content{
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
    }
    .title {
      width: 100%;
      // height: 100rpx;
      display: -webkit-box;
      text-overflow: ellipsis;
      overflow: hidden;-webkit-line-clamp: 2; // 设置两行文字溢出
      -webkit-box-orient: vertical;
      font-size: 30rpx;
      color: #4F4F4F;
      padding: 0 15rpx;
      background: #ffffff;
      box-sizing: border-box;
      border-radius: 0 0 10rpx 10rpx;
    }
    .select-icon {
      width: 34rpx;
      height: 34rpx;
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      z-index: 10;
    }
  }
  .tag{
    position: absolute;
    left: 0;
    top: 0;
    background: #07c160;
    color: #fff;
    padding: 3rpx 6rpx;
  }
}